<template>
        <textarea :id="id" :value="value"></textarea>
</template>
<script>
// Import TinyMCE
import tinymce from "tinymce/tinymce";
import "tinymce/themes/modern/theme";
import "tinymce/plugins/paste";
import "tinymce/plugins/link";
import "tinymce/plugins/image";
import "tinymce/plugins/advlist";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/media";
import "tinymce/plugins/imagetools";
const INIT = 0;
const CHANGED = 2;
var EDITOR = null;
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    setting: {}
  },
  watch: {
    value: function(val) {
      console.log("init " + val);
      if (this.status == INIT || tinymce.activeEditor.getContent() != val) {
        tinymce.activeEditor.setContent(val);
      }
      this.status = CHANGED;
    }
  },
  data: function() {
    return {
      status: INIT,
      id: "editor-" + new Date().getMilliseconds(),
      Url: "https://www.yteris.com/v1/ad/addimg",
      maxSize: 11100000, // 文件大小
      accept: "image/jpeg, image/png, image/jpg", // 文件格式
      withCredentials: true
    };
  },
  methods: {},
  mounted: function() {
    const _this = this;
    const setting = {
      selector: "#" + _this.id,
      language: "zh_CN",
      language_url: "/tinymce/langs/zh_CN.js",
      skin_url: "/tinymce/skins/lightgray",
      init_instance_callback: function(editor) {
        EDITOR = editor;
        console.log("Editor: " + editor.id + " is now initialized.");
        editor.on("input change undo redo", () => {
          var content = editor.getContent();
          _this.$emit("input", content);
        });
      },
      plugins: [
        "advlist link image",
        "code",
        "insertdatetime media table textcolor contextmenu paste imagetools wordcount"
      ],
      insert_button_items: "image link | inserttable",
      paste_retain_style_properties: "all",
      paste_word_valid_elements: "*[*]", // word需要它
      paste_data_images: true, // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
      paste_convert_word_fake_lists: false, // 插入word文档需要该属性
      paste_webkit_styles: "all",
      paste_merge_formats: true,
      nonbreaking_force_tab: false,
      paste_auto_cleanup_on_paste: false,
      setup(editor) {
        // 添加自定义按钮，以及绑定事件
        editor.addButton("mybutton", {
          text: "高级编辑",
          icon: false,
          onclick() {
            window.open("http://www.135editor.com/");
          }
        });
      },
      images_upload_handler: function(blobInfo, success, failure) {
        if (blobInfo.blob().size > self.maxSize) {
          failure("文件体积过大");
        }
        if (_this.accept.indexOf(blobInfo.blob().type) >= 0) {
          uploadPic();
        } else {
          failure("图片格式错误");
        }
        function uploadPic() {
          let formData = new FormData();
          // 服务端接收文件的参数名，文件数据，文件名
          formData.append("file", blobInfo.blob(), blobInfo.filename());
          _this.$http.post('/upload/addimg',formData)
            .then(res => {
              // 这里返回的是你图片的地址
              console.log(res)
              success(res.data.data);
            })
            .catch(() => {
              failure("上传失败");
            });
        }
      }
    };
    Object.assign(setting, _this.setting);
    tinymce.init(setting);
  },
  beforeDestroy: function() {
    tinymce.get(this.id).destroy();
  }
};
</script>


<style lang="less" scoped>
</style>

